<template>
    <div style="margin: 10px;padding: 10px;background-color: white;border-radius: 20px">
        <van-row>
            <van-col span="8" offset="1" style="font-weight: bold"><slot name="title"></slot></van-col>
            <van-col span="8" offset="7"><slot name="num"></slot></van-col>
        </van-row>

        <van-row>
            <mu-grid-list class="gridlist-inline-demo" :cols="4">
                <mu-grid-tile v-for="movie in movies.data" >
                    <img style="width: 100px;height: 110px" :src="movie.previewUrl" @click="goMovieDetailPage(movie.id)">
                    <span style="font-size: 12px;color: #C98D06;" class="movie-grade" v-if="movie.watchNumber==null">{{movie.grade}}分</span>
                    <span style="font-size: 10px;color: white" class="movie-grade" v-else>{{movie.watchNumber}}人想看</span>
                    <span slot="title" style="font-size: 12px">{{movie.name}}</span>
                    <span slot="subTitle">
                        <van-button @click="buyTicket" style="width: 40px;height: 20px" color="red" v-if="movie.grade!=null" round type="info">购票</van-button>
                        <van-button @click="wantWatch" style="width: 40px;height: 20px" color="#FEA722" v-if="movie.grade==null" round type="info">想看</van-button>
                    </span>
                </mu-grid-tile>
            </mu-grid-list>
        </van-row>
    </div>
</template>

<script>
    export default {
        name: "MovieXTable",
        props:{
            movies:{},
        },
        methods:{
            buyTicket(){
                console.log("购票");
            },
            wantWatch(){
                console.log("想看");
            },
            goMovieDetailPage(movieId){
                this.$router.push("/movieDetail/"+movieId)
            }
        }
    }
</script>

<style scoped>
    .gridlist-inline-demo {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
    }

    .movie-grade {
        position: relative;
        top: -25px;
        left: 12px;
    }
</style>